<template>
	<view class="love">
		<view class="content-title flex flex-center-align">
			<image src="../../static/icos/guess-u-like.png" mode=""></image><text>猜你喜欢</text>
		</view>
		<view class="love-content">
			<view class="content-item flex" v-for="(item,index) in items" :key="index">
				<div class="content-left flex">
					<div class="item-img">
						<image :src="item.img" mode=""></image>
					</div>
					<div class="item-content flex">
						<view class="title">
							{{item.title}}
						</view>
						<view class="flex flex-center-align">
							<uni-rate :value="item.score/2" size="14"></uni-rate><text class="score">{{item.score}}</text>
						</view>
						<view class="">
							<text>{{item.year}}</text>/<text>{{item.countries}}</text>/<text v-for="(t,index) in item.genres" :key="index">{{t}}</text>
						</view>
						<view class="">
							{{item.pubdates}}
						</view>
					</div>
				</div>
				<div class="content-right flex">
					<image src="../../static/icos/praise.png" mode="" style="width: 64upx;height: 64upx;"></image>
					<view class="">
						点一下
					</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '../uni-rate/uni-rate.vue'
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				items: [{
						img: "http://122.152.205.72:88/superhero/xman/DarkPhoenix/cover.png",
						title: "X战警：黑凤凰",
						score: 7.8,
						year: 2018,
						countries: "美国",
						pubdates: "上映时间：2019-06-07(美国)",
						genres: ["科幻", "超级英雄"]
					}, {
						img: "http://122.152.205.72:88/superhero/DC/WonderWoman/cover.jpg",
						title: "神奇女侠",
						score: 7.8,
						year: 2018,
						countries: "美国",
						pubdates: "上映时间： 2017-06-02(中国大陆)",
						genres: ["科幻", "超级英雄"]
					},
					{
						img: "http://122.152.205.72:88/superhero/xman/Apocalypse/cover.png",
						title: "X战警：天启",
						score: 7.8,
						year: 2018,
						countries: "美国",
						pubdates: "上映时间：2016-06-03(中国大陆)",
						genres: ["科幻", "超级英雄"]
					},
					{
						img: "http://122.152.205.72:88/superhero/DC/SuperMan/cover.jpg",
						title: "超人：钢铁之躯",
						score: 7.8,
						year: 2018,
						countries: "美国",
						pubdates: "上映时间： 2013-06-20(中国大陆) ",
						genres: ["科幻", "超级英雄"]
					},
					{
						img: "http://122.152.205.72:88/superhero/xman/DarkPhoenix/cover.png",
						title: "X战警：黑凤凰",
						score: 7.8,
						year: 2018,
						countries: "美国",
						pubdates: "上映时间：2019-06-07(美国)",
						genres: ["科幻", "超级英雄"]
					},
					{
						img: "http://122.152.205.72:88/superhero/xman/DarkPhoenix/cover.png",
						title: "X战警：黑凤凰",
						score: 7.8,
						year: 2018,
						countries: "美国",
						pubdates: "上映时间：2019-06-07(美国)",
						genres: ["科幻", "超级英雄"]
					},
					{
						img: "http://122.152.205.72:88/superhero/xman/DarkPhoenix/cover.png",
						title: "X战警：黑凤凰",
						score: 7.8,
						year: 2018,
						countries: "美国",
						pubdates: "上映时间：2019-06-07(美国)",
						genres: ["科幻", "超级英雄"]
					},
					{
						img: "http://122.152.205.72:88/superhero/xman/DarkPhoenix/cover.png",
						title: "X战警：黑凤凰",
						score: 7.8,
						year: 2018,
						countries: "美国",
						pubdates: "上映时间：2019-06-07(美国)",
						genres: ["科幻", "超级英雄"]
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.content-title {
		height: 80upx;

		image {
			width: 32upx;
			height: 32upx;
			margin: 0 20upx;
		}

		text {
			font-size: 32upx;
		}
	}

	.content-item {
		margin-bottom: 20upx;
	}

	.item-img {
		width: 180upx;
		height: 240upx;

		image {
			width: 180upx;
			height: 240upx;
		}
	}

	.title {
		font-weight: bold;
		font-size: 36upx;
	}

	.item-content {
		width: 340upx;
		flex-direction: column;
		padding-left: 20upx;
		border-right: 1px dashed #666;

		view {
			margin-bottom: 5upx;
		}
	}

	.content-right {
		min-width: 140upx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
